import { mapGetters } from 'vuex'
export default {
    data() {
        return {

        }
    },

    computed: {
        ...mapGetters('tab', ['currrentMenuList'])
    },

    async created() {
        let result = await this.$mock.getUserMenu()
        this.$store.commit('tab/setMenuList', result.data)
        await this.$nextTick()
        // 咱们只添加需要的路由，其他的让他拜拜
        this.handleRouterForamt(this.currrentMenuList)
        // console.log('老谢万岁')
    },

    methods: {
        handleRouterForamt(data,  parentPath = '', parentName = '') {
            return data.map(item => {
                return this.routeFormat(item, parentPath, parentName)
            }) 
        },

       /**
        *  利用动态添加路由的方式
        *  此权限更加直接避免用户通过路径直接进入页面
        *           
        *  这里发现一个奇妙的东西
        *  mock模拟的文件地址不能通过 @直接获得
        *  譬如模拟路径为          /views/xx/xxx   此时拼接 @ 在前面就会找不到文件路径         （失败）
        *  但是如果模拟路径为      views/xx/xxx    此时拼接 @/ 就不会出现找不到文件的情况      （成功）
        *  
        *  这里还有一点老狗一样的操作就是，TM的加子路由，不单单要在路径上添加父路由的路径 添加方法里面还要把父路由的name 加上
        */
        routeFormat({ path, name, pagehref, meta, children }, parentPath, parentName) {
            let newRouter = {
                path: `${ parentPath }${ path }`,
                // name,
                meta,
                component: () => import(`@/${ pagehref }`)
            }
            if(parentName) {
                this.$router.addRoute(parentName, newRouter)
            } else {
                this.$router.addRoute(newRouter)
            }

            if(children && children != undefined) {
                this.handleRouterForamt(children, path, name )
            }
        },

    },

    beforeCreate () {
        
    },

    mounted() {
        
    },
}
